<template>
  <div class="app-container">
    <el-dialog
      :title="``"
      :visible="true"
      width="1300px"
      :close-on-click-modal="false"
      append-to-body
      @close="cancel"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="info.type == 2">
        <div class="model-header">企业及法人信息</div>
        <el-row>
          <el-col>
            <el-col :span="8">
              <el-form-item label="公司名称" prop="companyName">
                <el-input
                  v-model="form.companyName"
                  placeholder="请输入公司名称"
                  
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="社会统一信息代码"
                prop="unifiedSocialCreditCode"
              >
                <el-input
                  v-model="form.unifiedSocialCreditCode"
                  placeholder="请输入社会统一信息代码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="公司电话" prop="companyNumber">
                <el-input
                  v-model="form.companyNumber"
                  placeholder="请输入公司电话"
                />
              </el-form-item>
            </el-col>
          </el-col>
          <el-col>
            <el-col :span="8">
              <el-form-item label="公司所在地" prop="countryDomicile">
                <el-cascader
                  style="width: 200px"
                  class="w200"
                  v-model="form.countryDomicile"
                  placeholder="请选择省/市/区"
                  :options="cityList"
                  :props="{ value: 'v', label: 'v', children: 'c' }"
                  filterable
                  clearable
                >
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人姓名" prop="nameLegalPerson">
                <el-input
                  v-model="form.nameLegalPerson"
                  placeholder="请输入法人姓名"
                />
              </el-form-item>
            </el-col>
          </el-col>
          <el-col>
            <el-col :span="8">
              <el-form-item label="法人证件类型" prop="certificateType">
                <el-input
                  v-model="form.certificateType"
                  placeholder="请输入公司名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人证件号" prop="legalPersonCertificateNo">
                <el-input
                  v-model="form.legalPersonCertificateNo"
                  placeholder="请输入法人证件号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人姓名" prop="contactName">
                <el-input
                  v-model="form.contactName"
                  placeholder="请输入联系人姓名"
                />
              </el-form-item>
            </el-col>
          </el-col>
          <el-col>
            <el-col :span="8">
              <el-form-item label="联系人手机号码" prop="contactMobileNumber">
                <el-input
                  v-model="form.contactMobileNumber"
                  placeholder="请输入联系人手机号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人邮箱" prop="contactEmail">
                <el-input
                  v-model="form.contactEmail"
                  placeholder="请输入联系人邮箱"
                />
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <div class="model-header">企业对公账户</div>
        <el-row>
          <el-col>
            <el-col :span="8">
              <el-form-item label="账户名称" prop="accountName">
                <el-input
                  v-model="form.accountName"
                  placeholder="请输入账户名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行账号" prop="bankAccount">
                <el-input
                  v-model="form.bankAccount"
                  placeholder="请输入银行账号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户行名称" prop="depositBankName">
                <el-input
                  v-model="form.depositBankName"
                  placeholder="请输入开户行名称"
                />
              </el-form-item>
            </el-col>
          </el-col>
          <el-col>
            <el-col :span="12">
              <el-form-item label="开户行地址" prop="bankAddress">
                <el-cascader
                  style="width: 200px"
                  class="w200"
                  v-model="form.bankAddress"
                  placeholder="请选择省/市/区"
                  :options="cityList"
                  :props="{ value: 'v', label: 'v', children: 'c' }"
                  filterable
                  clearable
                >
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <div class="model-header">附件信息</div>
        <el-row class="ml-50">
          <el-col>
            <el-col :span="8">
              <span class="uploadText">请上传法人身份证和营业执照</span>
              <el-upload
                name="files"
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleImageChange"
                :auto-upload="false"
                :file-list="form.fileList"
                list-type="picture-card"
                multiple
              >
                <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog
                :visible.sync="imgDialog"
                :modal-append-to-body="false"
              >
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-col>
          </el-col>
        </el-row>
        <div class="model-header">合同信息</div>
        <el-row class="ml-50">
          <el-col>
            <el-col :span="8">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleChange"
                :file-list="fileList"
                :auto-upload="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-col>
          </el-col>
        </el-row>
        <div class="model-header">账单信息</div>
        <el-row class="ml-50">
          <el-col>
            <el-col :span="8">
             <el-radio-group v-model="form.billInfo">
               <el-radio label="1">按周出账单</el-radio>
               <el-radio label="2">按月出账单</el-radio>
               <el-radio label="3">按季出账单</el-radio>
             </el-radio-group>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="info.type != 2"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { cityList } from "@/common/js/city.js";
import { utils } from "@/utils/utils";

export default {
  name: "add",
  props: ["show", "info",'detail'],
  data() {
    return {
      cityList: cityList,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      imageUrl: "",
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: "公司名称不能为空", trigger: "change" },
        ],
        unifiedSocialCreditCode: [
          {
            required: true,
            message: "社会统一信用代码不能为空",
            trigger: "blur",
          },
        ],
      },
      supplierList: [
        {
          id: 1, //id
          number: "GY123456", //编号
          companyName: "深圳一飞冲天有限公司", //公司名称
          unifiedSocialCreditCode: "91440300319335486Y", //统一社会信用代码
          companyNumber: "0751-3753666", //公司电话
          nameLegalPerson: "李白", //法人姓名
          legalPersonCertificateNo: "121231212121554", //法人证件号
          contactName: "杜甫", //联系人姓名
          contactMobileNumber: "13825654587", //联系人手机号码
          contactEmail: "2115454@qq.com", //联系人邮箱
          state: "1", //状态
          founder: "admin", //创建人
          createTime: "2022-04-15 12:00:00", //创建时间
          address: "", //详细地址
          certificateType: "", //证件类型
          accountName: "", //账户名称
          bankAccount: "", //银行账号
          depositBankName: "", //开户行名称
          bankAddress: "", //开户行地址
          countryDomicile: "", //公司所在地
          billInfo: "1"
          
        },
      ],
      updateParams: {
        fileList: [],
      },
      imgDialog: false,
      dialogImageUrl: "",
    };
  },
  created() {
    if (this.info.type == 2 || this.info.type == 3) {
      this.form = this.detail;
      this.form.billInfo = "1";
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      return true;
    },
    handleChange(file, fileList) {
        console.log(fileList)
        this.fileList = fileList;
    //   this.fileList.push(file);
    },
    /** 提交按钮 */
    submitForm() {
      this.$modal.msgSuccess("操作成功");
      this.open = false;
      this.form.founder = 'admin';
      this.form.createTime = utils.getFormatDate(new Date);
      this.form.state = "1";
      this.$emit("sureData", this.form);
      // this.$refs["form"].validate(valid => {
      //     if (valid) {
      //         this.open = false;
      //         this.$emit('sure', this.form);
      //     }
      // });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.$emit("close", false);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgDialog = true;
    },
    handleImageChange(file, fileList) {
      console.log(fileList);
      //   this.updateParams.fileList = fileList;
      //   this.updateParams.productSrc = file.url;
      //   this.updateParams.productSrcArr = [file.url];
    },
  },
};
</script>
  
<style>
.model-header {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
.avatar {
  display: block;
}
.uploadText {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #8c939d;
}
.dialog-footer {
  text-align: center;
}
.ml-50 {
  margin-left: 30px;
}
</style>